<template>
  <el-card shadow="hover">
    <el-descriptions
      class="margin-top"
      title="异动操作"
      :column="3"
      :size="size"
      border
    >
      <template #extra>
        <div style="float: left">
          <el-button
            v-if="limit != 2"
            type="primary"
            @click="transactionEdit(1)"
          >
            换店长组
          </el-button>
        </div>
        <div v-if="limit == 2" style="float: left">
          <el-button
            v-if="ActStaffPostID == 43"
            type="primary"
            @click="transactionEdit(44)"
          >
            换续签客服
          </el-button>
          <!-- <el-button
            v-if="ActStaffPostID == 43 || ActStaffPostID == 41"
            type="primary"
            @click="transactionEdit(45)"
          >
            换综合续签客服
          </el-button> -->
          <el-button
            v-if="ActStaffPostID == 20"
            type="primary"
            @click="transactionEdit(2)"
          >
            换运营师
          </el-button>
          <el-button
            v-if="
              ActStaffPostID == 20 ||
              ActStaffPostID == 21 ||
              ActStaffPostID == 41 ||
              ActStaffPostID == 43 ||
              ActStaffPostID == 44 ||
              ActStaffPostID == 45
            "
            type="primary"
            @click="transactionEdit(5)"
          >
            不再续费
          </el-button>
        </div>
        <div v-if="limit != 2" style="float: left; margin-left: 10px">
          <el-button type="primary" @click="transactionEdit(3)">
            服务暂停
          </el-button>
          <el-button type="primary" @click="transactionEdit(4)">
            服务恢复
          </el-button>
          <el-button type="primary" @click="transactionEdit(6)">退款</el-button>
          <el-button type="primary" @click="transactionEdit(7)">
            服务终止
          </el-button>
          <el-button type="primary" @click="transactionEdit(8)">
            换店服务
          </el-button>
          <el-button
            v-if="ActStaffPostID == 10"
            type="primary"
            @click="transactionEdit(9)"
          >
            延期服务
          </el-button>
        </div>
      </template>
    </el-descriptions>
    <el-table
      v-loading="listLoading"
      :data="OrderChangeList"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        label="异动ID"
        prop="OrderChangeID"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="异动时间"
        prop="addTime"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="异动操作">
        <template #default="{ row }">
          <div v-if="row.ActType == 1">换店长组</div>
          <div v-if="row.ActType == 2">换运营师</div>
          <div v-if="row.ActType == 3">服务暂停</div>
          <div v-if="row.ActType == 4">恢复服务</div>
          <div v-if="row.ActType == 5">不再续费</div>
          <div v-if="row.ActType == 6">退款</div>
          <div v-if="row.ActType == 7">服务终止</div>
          <div v-if="row.ActType == 8">换店服务</div>
          <div v-if="row.ActType == 9">延期服务</div>
          <div v-if="row.ActType == 44">换续签客服</div>
          <!-- <div v-if="row.ActType == 45">换综合续签客服</div> -->
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="异动产品"
        prop="ProductName"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="操作人"
        prop="ActStaffName"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="备注"
        prop="ChangeMemo"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="transactionEdit(row.ActType, row)">
            查看/修改异动
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <ChangeMangerEdit ref="ChangeMangerEditRef" @fetch-data="updateChange" />
  <ChangeOperatorEdit ref="ChangeOperatorEditRef" @fetch-data="updateChange" />
  <OperatePauseEdit ref="OperatePauseEditRef" @fetch-data="updateChange" />
  <OperateRecoverEdit ref="OperateRecoverEditRef" @fetch-data="updateChange" />
  <StopRenewalEdit ref="StopRenewalEditRef" @fetch-data="updateChange" />
  <RefundEdit ref="RefundEditRef" @fetch-data="updateChange" />
  <ServiceTerminationEdit
    ref="ServiceTerminationEditRef"
    @fetch-data="updateChange"
  />
  <ExchangeServiceEdit
    ref="ExchangeServiceEditRef"
    @fetch-data="updateChange"
  />
  <DeferredServiceEdit
    ref="DeferredServiceEditRef"
    @fetch-data="updateChange"
  />
</template>

<script>
  import { getOrderChangeList } from '@/api/businessOrder'
  import ChangeMangerEdit from '@/views/business/components/ChangeMangerEdit'
  import ChangeOperatorEdit from '@/views/business/components/ChangeOperatorEdit'
  import OperatePauseEdit from '@/views/business/components/OperatePauseEdit'
  import OperateRecoverEdit from '@/views/business/components/OperateRecoverEdit'
  import StopRenewalEdit from '@/views/business/components/StopRenewalEdit'
  import RefundEdit from '@/views/business/components/RefundEdit'
  import ServiceTerminationEdit from '@/views/business/components/ServiceTerminationEdit'
  import ExchangeServiceEdit from '@/views/business/components/ExchangeServiceEdit'
  import DeferredServiceEdit from '@/views/business/components/DeferredServiceEdit'
  import { doTrusteeship } from '@/api/businessOrderCreate'

  export default defineComponent({
    name: 'OrderChanged',
    components: {
      ServiceTerminationEdit,
      ExchangeServiceEdit,
      DeferredServiceEdit,
      ChangeMangerEdit,
      ChangeOperatorEdit,
      OperatePauseEdit,
      OperateRecoverEdit,
      StopRenewalEdit,
      RefundEdit,
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const route = useRoute()

      const state = reactive({
        limit: 0,
        OrderList: [],
        GiftList: [],
        OrderChangeList: [],
        listLoading: false,
        ServiceTerminationEditRef: null,
        ExchangeServiceEditRef: null,
        DeferredServiceEditRef: null,
        ChangeMangerEditRef: null,
        ChangeOperatorEditRef: null,
        OperatePauseEditRef: null,
        OperateRecoverEditRef: null,
        StopRenewalEditRef: null,
        RefundEditRef: null,
        formRef: null,
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          title: '',
        },
        form: {
          roles: [],
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
        ActStaffPostID: 0,
      })

      const showList = (ProductList, GiftList, Num) => {
        state.OrderList = ProductList
        state.GiftList = GiftList
        if (Num == 2) {
          // 只显示换运营师按钮
          state.limit = Num
        }

        const userInfo = JSON.parse(localStorage.getItem('userInfo'))
        const actstaffpost = JSON.parse(userInfo.StaffPostID)
        state.ActStaffPostID = actstaffpost[0][1]

        console.log(ProductList, 'GiftListGiftList')

        console.log(GiftList, 'GiftListGiftList')
      }
      const getOrderChanges = async () => {
        const { data } = await getOrderChangeList(state.queryForm)
        state.OrderChangeList = data
      }

      const updateChange = () => {
        getOrderChanges()
        emit('fetch-data')
      }

      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          roles: [],
        }
      }

      // 异动操作
      const transactionEdit = (type, row) => {
        let rowMsg
        if (row) {
          rowMsg = row
        } else {
          rowMsg = {
            OrderID: state.queryForm.OrderID,
          }
        }
        if (type == 1) {
          // 换店长组
          state.ChangeMangerEditRef.showEdit(
            rowMsg,
            state.OrderList,
            state.GiftList
          )
        }
        if (type == 2) {
          // 换运营师
          state.ChangeOperatorEditRef.showEdit(
            rowMsg,
            state.OrderList,
            state.GiftList,
            type
          )
        }
        if (type == 44) {
          // 换网站续签客服
          state.ChangeOperatorEditRef.showEdit(
            rowMsg,
            state.OrderList,
            state.GiftList,
            type
          )
        }
        if (type == 45) {
          // 换综合续签客服
          state.ChangeOperatorEditRef.showEdit(
            rowMsg,
            state.OrderList,
            state.GiftList,
            type
          )
        }
        if (type == 3) {
          // 店铺暂停
          state.OperatePauseEditRef.showEdit(
            rowMsg,
            state.OrderList,
            state.GiftList
          )
        }
        if (type == 4) {
          // 店铺恢复运营
          state.OperateRecoverEditRef.showEdit(
            rowMsg,
            state.OrderList,
            state.GiftList
          )
        }
        if (type == 5) {
          // 不再续费
          state.StopRenewalEditRef.showEdit(
            rowMsg,
            state.OrderList,
            state.GiftList
          )
        }
        if (type == 6) {
          // 退款
          state.RefundEditRef.showEdit(rowMsg, state.OrderList, state.GiftList)
        }
        if (type == 7) {
          // 终止服务
          state.ServiceTerminationEditRef.showEdit(
            rowMsg,
            state.OrderList,
            state.GiftList
          )
        }
        if (type == 8) {
          // 换店服务
          state.ExchangeServiceEditRef.showEdit(
            rowMsg,
            state.OrderList,
            state.GiftList
          )
        }
        if (type == 9) {
          // 延期服务
          state.DeferredServiceEditRef.showEdit(
            rowMsg,
            state.OrderList,
            state.GiftList
          )
        }
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await doTrusteeship(state.form)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }
      onMounted(() => {
        if (route.query.orderid) {
          state.queryForm.OrderID = route.query.orderid
        }
        if (route.query.OrderID) {
          state.queryForm.OrderID = route.query.OrderID
        }
        getOrderChanges()
      })

      watch(route, (newVal, oldValue) => {
        console.log(newVal, oldValue, '12312312')
        if (newVal.query.orderid) {
          state.queryForm.OrderID = route.query.orderid
        }
        if (newVal.query.OrderID) {
          state.queryForm.OrderID = route.query.OrderID
        }
        getOrderChanges()
      })

      return {
        ...toRefs(state),
        getOrderChanges,
        close,
        transactionEdit,
        showList,
        save,
        updateChange,
      }
    },
  })
</script>
